<template>
  <!--  <div :id="echartsId" :style="{width: this.pcMobile == 1 ? '600px' : '370px'}"-->
  <!--       style="height:350px;margin-top: 10px"></div>-->
  <div :id="echartsId" style="height:350px;margin-top: 10px;width: 370px"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    echartsId: {
      type: String,
      default: ''
    },
    echartsType: {
      type: String,
      default: 'line'
    },
    echartsData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    dataZoom: {
      type: Boolean,
      default: true
    },
    dataZoomEndValue: {
      typa: Number,
      default: 1
    }

  },
  data() {
    return {
      pcMobile: '1', // 1 PC端，2 移动端
      option: {
        title: {
          text: '',
          // top: 20
        },
        grid: {
          top: '35%',//距上边距
          // left:'25%',//距离左边距
          // right:'25%',//距离右边距
          bottom: '37%',//距离下边距

        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: '30px',
          x: 'left',
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            rotate: 50 //倾斜角度
            //rotate: -50 向右转
          },
        },
        yAxis: {},
        dataZoom: [],
        // dataZoom: [{  //添加dataZoom属性即可显示滑动条
        //   // type: 'slider',
        //   // start: 0,
        //   // end: 50
        //
        //
        //   type: 'inside',
        //   show: true, //flase直接隐藏图形
        //   // 滚轮是否触发缩放
        //   zoomOnMouseWheel: false,
        //   // 鼠标移动能否触发平移
        //   moveOnMouseMove: false,
        //   // 鼠标滚轮能否触发平移
        //   moveOnMouseWheel: false,
        //
        //   xAxisIndex: [0],
        //   // left: '9%', //滚动条靠左侧的百分比
        //   // bottom: -5,
        //   start: 0,//滚动条的起始位置
        //   end: 5000, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
        //   // animation: false
        // }],
        dataset: {
          source: [
            // ['product', '2015', '2016', '2017'],
            // ['Matcha Latte1', 43.3, 85.8, 93.7],
            // ['Milk Tea', 83.1, 73.4, 55.1],
            // ['Cheese Cocoa', 86.4, 65.2, 82.5],
            // ['Walnut Brownie', 72.4, 53.9, 39.1]
          ]
        },
        series: []//[{type: 'bar'}, {type: 'bar'}]//[]// [{type: 'bar'}, {type: 'bar'}]
      }
    }
  },
  mounted() {
    this.isMobile()
  },
  methods: {
    isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      // 1 PC端，2 移动端
      this.pcMobile = flag ? '2' : '1'
      this.getData()
    },
    getData() {
      //获取echarts对象
      let that = this
      let myChart = echarts.init(document.getElementById(this.echartsId));
      this.option.dataset.source = this.echartsData.seriesData
      this.option.title.text = this.echartsData.name
      if (this.echartsData.seriesData.length > 0 && this.echartsData.seriesData[0].length > 0) {
        let seriesData = []
        this.echartsData.seriesData[0].forEach((item, index) => {
          let color = ''
          if (index === 0) {
            color = '#4F87FF'
          } else if (index === 1) {
            color = '#FACC14'
          } else if (index === 2) {
            color = '#3CD29A'
          } else if (index === 3) {
            color = '#2DC25B'
          }
          // else if(index === 4){
          //   color = '#2DC25B'
          // }else if(index === 5){
          //   color = '#2DC25B'
          // }else if(index === 6){
          //   color = '#2DC25B'
          // }else if(index === 7){
          //   color = '#2DC25B'
          // }
          seriesData.push({
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              valueAnimation: true
            },
            itemStyle: {
              // 设置柱状图的颜色
              color: color
            }
          })
        })
        seriesData.pop()
        this.option.series = seriesData

        if (this.dataZoom) {
          this.option.dataZoom = [{

            // 设置滚动条的隐藏与显示
            show: true,
            // 设置滚动条类型
            // type: "slider",
            type: "inside",
            // 设置背景颜色
            backgroundColor: "rgb(19, 63, 100)",
            // 设置选中范围的填充颜色
            fillerColor: "rgb(16, 171, 198)",
            // 设置边框颜色
            borderColor: "rgb(19, 63, 100)",
            // 是否显示detail，即拖拽时候显示详细数值信息
            showDetail: false,
            // 数据窗口范围的起始数值
            startValue: 0,
            // 数据窗口范围的结束数值（一页显示多少条数据）
            endValue: that.dataZoomEndValue,
            // empty：当前数据窗口外的数据，被设置为空。
            // 即不会影响其他轴的数据范围
            filterMode: "empty",
            // 设置滚动条宽度，相对于盒子宽度
            // width: "50%",
            // 设置滚动条高度
            height: 10,
            // 设置滚动条显示位置
            // left: "center",
            // 是否锁定选择区域（或叫做数据窗口）的大小
            zoomLock: true,
            // 控制手柄的尺寸
            handleSize: 0,
            // dataZoom-slider组件离容器下侧的距离
            bottom: 3,


            // type: 'slider',
            // // show: false, //flase直接隐藏图形
            // // 滚轮是否触发缩放
            // zoomOnMouseWheel: false,
            // // 鼠标移动能否触发平移
            // moveOnMouseMove: false,
            // // 鼠标滚轮能否触发平移
            // moveOnMouseWheel: false,
            // height: normalFontSize(12),//滚动条高度
            // width: normalFontSize(112),//滚动条长度
            //
            // xAxisIndex: [0],
            // start: 0,//滚动条的起始位置
            // end: 50, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
          }]
        } else {
          this.option.dataZoom = []
        }
      }
      myChart.setOption(this.option);
    }
  }

}
</script>

<style scoped>

</style>
